<template>
  <div>
    <div class="center-w">
      <div class="head">
        <div class="head-w">
          <div class="title">活动管理</div>
          <el-input
            prefix-icon="el-icon-search"
            style="width: 200px;margin-right: 10px;;"
            size="small"
            v-model="pageparm.SearchKey"
            placeholder="活动名称"
            clearable
            @input="getList()"
          ></el-input>
          <el-date-picker
            v-model="pageparm.StartDate"
            type="date"
            size="small"
            placeholder="报名时间"
            @change="getList()"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </div>
        <el-button size="small" type="success" @click="addClick"
          >新增活动</el-button
        >
      </div>
      <div style="overflow-y: scroll;height: 100%;">
        <el-table
          :header-cell-style="{
            background: '#f3f6fa',
            color: '#555'
          }"
          size="mini"
          border
          height="100%"
          :data="tableData"
        >
          <el-table-column
            :show-overflow-tooltip="true"
            align="center"
            prop="activityNo"
            label="活动编码"
            width="200"
          ></el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            align="center"
            prop="name"
            label="活动名"
          ></el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            align="right"
            prop="signCount"
            width="100"
            label="报名人数"
          ></el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            align="right"
            prop="money"
            width="100"
            label="金额"
          >
            <template slot-scope="scope">
              <el-link style="font-size: 12px;" type="danger"
                >￥{{ scope.row.money }}
              </el-link>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            :show-overflow-tooltip="true"
            prop="signDate"
            label="报名时间"
          >
            <template slot-scope="scope">
              {{ scope.row.signDate }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="activityDate"
            :show-overflow-tooltip="true"
            label="活动时间"
          >
            <template slot-scope="scope">
              {{ scope.row.activityDate }}
            </template>
          </el-table-column>
          <el-table-column
            width="150"
            prop="roleName"
            align="center"
            label="活动开关"
          >
            <template slot-scope="scope">
              <el-switch
                @change="updateState(scope.row)"
                v-model="scope.row.isActive"
              ></el-switch>
              <span style="margin-left: 10px;">
                {{ scope.row.isActive ? "开" : "关" }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="operate"
            label="操作"
            width="220"
          >
            <template slot-scope="scope">
              <el-button
                @click="editClick(scope.row)"
                size="mini"
                type="primary"
                >编辑</el-button
              >
              <el-button @click="delClick(scope.row)" size="mini" type="danger"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <Pagination
        v-bind:child-msg="pageparm"
        @callFather="callFather"
      ></Pagination>

      <!-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- 新增活动-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --  -->

      <el-dialog :title="title" width="31%" :visible.sync="activityVisible">
        <div class="detail_container">
          <el-form
            :model="formData"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="活动名称：" prop="name">
              <el-input
                v-model="formData.name"
                placeholder="请输入活动名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="活动金额：" prop="money">
              <el-input
                type="number"
                placeholder="请输入活动金额"
                v-model="formData.money"
              ></el-input>
            </el-form-item>
            <el-form-item label="报名时间：" prop="signDate">
              <el-date-picker
                v-model="formData.signDate"
                type="datetimerange"
                range-separator="至"
                start-placeholder="报名开始日期"
                end-placeholder="报名结束日期"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 100%;"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="活动时间：" prop="applyDate">
              <el-date-picker
                v-model="formData.applyDate"
                type="datetimerange"
                range-separator="至"
                start-placeholder="活动开始日期"
                end-placeholder="活动结束日期"
                style="width: 100%;"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item>
          </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="activityVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleSubmit('ruleForm')"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";

import {
  getActivityPageList,
  createActivity,
  updateActivity,
  setActiveActivity,
  deleteActivity
} from "@/api/signActivity";

export default {
  components: { Pagination },
  data() {
    return {
      // 表格数据
      tableData: [],
      title: "新增活动",
      activityVisible: false,
      formData: {
        name: "",
        money: null,
        signDate: [],
        applyDate: []
      },
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        money: [{ required: true, message: "请输入金额", trigger: "blur" }],
        signDate: [
          { required: true, message: "请选择报名时间：", trigger: "change" }
        ],
        applyDate: [
          { required: true, message: "请选择活动时间", trigger: "change" }
        ]
      },
      //分页
      pageparm: {
        SearchKey: "",
        StartDate: null,
        pageIndex: 1,
        PageSize: 50,
        total: 1
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 获取列表
    async getList() {
      const res = await getActivityPageList(this.pageparm);
      if (res.code == 200 && res.data) {
        let { items, totalCount } = res.data;
        items &&
          items.map(v => {
            v.signDate = v.signStartDate + "    至   " + v.signEndDate;
            v.activityDate =
              v.activityStartDate + "    至   " + v.activityEndDate;
          });
        this.tableData = items;
        this.pageparm.total = totalCount;
      } else {
        this.tableData = [];
      }
    },

    // 添加按钮
    addClick() {
      this.title = "新增活动";
      this.activityVisible = true;
      this.formData = {
        name: "",
        money: null,
        signDate: [],
        applyDate: []
      };
      if (this.$refs["ruleForm"]) this.$refs["ruleForm"].resetFields();
    },

    // 编辑按钮
    editClick(row) {
      this.formData.signDate = [row.signStartDate, row.signEndDate];
      this.formData.applyDate = [row.activityStartDate, row.activityEndDate];
      console.log(" this.formData", this.formData);
      this.formData.name = row.name;
      this.formData.money = row.money;
      this.formData.id = row.id;
      this.title = "编辑活动";
      this.activityVisible = true;
    },

    // 提交
    handleSubmit(ruleForm) {
      this.$refs[ruleForm].validate(async valid => {
        if (valid) {
          this.formData.signStartDate = this.formData.signDate[0].replace(
            " ",
            "T"
          );
          this.formData.signEndDate = this.formData.signDate[1].replace(
            " ",
            "T"
          );
          this.formData.activityStartDate = this.formData.applyDate[0].replace(
            " ",
            "T"
          );
          this.formData.activityEndDate = this.formData.applyDate[1].replace(
            " ",
            "T"
          );
          let res =
            this.title == "编辑活动"
              ? await updateActivity(this.formData)
              : await createActivity(this.formData);
          if (res.code == 200) {
            this.$message.success(
              this.title == "编辑活动" ? "编辑成功" : "新增成功"
            );
            this.activityVisible = false;
            this.getList();
          } else {
            this.$message.error(res.message);
          }

          return false;
        }
      });
    },

    //开关控制
    updateState(r) {
      this.$confirm(
        `确认${r.isActive ? "打开该活动" : "关闭"}吗? `,
        "确认信息",
        {
          distinguishCancelAndClose: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消"
        }
      )
        .then(() => {
          setActiveActivity({
            active: r.isActive,
            id: r.id
          }).then(res => {
            if (res.code == 200) {
              this.$message.success(`已${r.isActive ? "打开" : "关闭"}`);
              this.getList();
            }
          });
        })
        .catch(action => {
          this.getList();
        });
    },

    //删除按钮
    delClick(row) {
      this.$confirm("确定删除该活动？ 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        // 调用删除接口
        deleteActivity({ ids: [row.id] }).then(() => {
          this.$message.success("删除成功！");
          this.getList();
        });
      });
    },

    // 分页插件事件
    callFather(parm) {
      this.pageparm.pageIndex = parm.pageIndex;
      this.pageparm.PageSize = parm.size;
      this.getList();
    }
  }
};
</script>

<style lang="less" scoped>
.center-w {
  display: flex;
  /* align-items: center; */
  flex-direction: column;
  background-color: #fff;
  height: 89vh;
  padding: 10px;
  border: 1px solid #ccc;
  //margin: 20px;
}

.title {
  color: rgba(16, 16, 16, 1);
  font-size: 20px;
  margin-right: 20px;
  margin-bottom: 10px;
}

.active {
  color: rgb(124, 134, 244) !important;
}

.head {
  display: flex;
  margin-bottom: 10px;
  padding-bottom: 10px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid #eee;
  .head-w {
    display: flex;
  }
}
</style>
